<!DOCTYPE html>
<html ng-app='OLH' ng-controller="CharacterController">
<head>
    <title>Oblivion Leveling Helper</title>
    <link rel="stylesheet" href="css/style.css"/>

    <!-- Include datastructure -->
    <script type="text/javascript" src="js/datastructure/Character.js"></script>
    <script type="text/javascript" src="js/datastructure/Races.js"></script>
    <script type="text/javascript" src="js/datastructure/Skills.js"></script>
    <script type="text/javascript" src="js/datastructure/Attributes.js"></script>
    <script type="text/javascript" src="js/datastructure/Specializations.js"></script>
    <script type="text/javascript" src="js/datastructure/Classes.js"></script>
    <script type="text/javascript" src="js/datastructure/Birthsigns.js"></script>

    <!-- Include controllers -->
    <script type="text/javascript" src="js/CharacterController.js"></script>

    <!-- Jquery & JQuery UI -->
    <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>-->
	<link href="css/oblivion-theme/jquery-ui-1.10.2.custom.css" rel="stylesheet">
	<script src="js/jquery/jquery-1.9.1.js"></script>
	<script src="js/jquery/jquery-ui-1.10.2.custom.js"></script>

    <!-- AngularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

    <style>
        .icons {
            margin: 0;
            padding: 0;
        }
        .icons li {
            margin: 2px;
            position: relative;
            padding: 4px 0;
            cursor: pointer;
            float: left;
            list-style: none;
        }
        .icons span.ui-icon {
            float: left;
            margin: 0 4px;
            width: 10px;
            height: 10px;
        }
        .ui-icon-arrowthick-1-s { background-position: -67px -51px; }
        .ui-icon-arrowthick-1-n { background-position: -2px -51px; }
        /*.ui-icon-arrowthick-1-s { background-position: -64px -48px; }*/
        /*.ui-icon-arrowthick-1-n { background-position: 0 -48px; }*/
    </style>
</head>
<body>
    <script>
        // Configure the startFrom filter for AngularJS
        var appOLH = angular.module('OLH', []);
        appOLH.filter("startFrom", function(){
            return function(input, start) {
                start = +start; //parse to int
                return input.slice(start);
            }
        });

        // Stuff to do when the document is ready
        $(document).ready(function()
        {
            // Transform all buttons into JUI buttons
            $("button").button();

            // Enable the tabs
            $("#tabs").tabs();

            // Enable the level progress bar
            $( "#levelProgressBar" ).progressbar({
                value: 0
            });

            // Enable button mouse-over effects -- Disabled, glitchy with leveling tab
//            $( ".statControls").find("li" ).hover(
//                function() {
//                    $( this ).addClass( "ui-state-hover" );
//                },
//                function() {
//                    $( this ).removeClass( "ui-state-hover" );
//                }
//            );
        });
    </script>

    <div id="header"></div>
    <div id="centerBox">
        <div>
            <div id="headerLogo">
                <a href="index.html"><img src="img/oblivion_title.png" height="70" /></a>
            </div>
            <div id="headerNote">
                <b>Oblivion Leveling Helper 0.1a</b><br/>
                Please report any bugs <a href="#">here</a>.<br/>
                Inspired by the <a href="https://mugenmonkey.com/darksouls/" target="_blank">Dark Souls
                Character Planner</a>.
            </div>
            <div style="clear: both"></div>
        </div>

        <div id="content">
            <div id="tabs">
                <ul>
                    <li><a href="#tabs-1">Character</a></li>
                    <li><a href="#tabs-2">Guide</a></li>
                    <li><a href="#tabs-3">Leveling</a></li>
                </ul>
                <div id="tabs-1">
                    <div id="tabCharacterConfiguration">
                        <h1>Welcome!</h1>
                        Welcome to the Oblivion Leveling Helper, a tool to help you level efficiently in Oblivion
                        without having to keep stacks of administration papers for your character! This tool is
                        currently under development, so certain critical features might still be missing.
                        Please check back later! The options below are only for testing purposes.
                        <br/><br/>Last edit: 8th of may, 2013
                        <br/>
                        <hr/>
                        <h1>Load character</h1>
                        [BETA] Load a previously created character using your character's key. If you've yet to
                        create a character, please use one of the options below.<br/><br/>
                        Please enter your character key:
                        <input id="textFieldCharacterKey" type="text" ng-model="loadCharacterId"/>
                        <br/><br/><button id="buttonLoadCharacter" ng-click="loadCharacter(loadCharacterId)">Load character</button>
                        <hr/>
                        <br/>

                        <h1>Character creation: Pre-made options</h1>

                        Please select a race, a birthsign and a class from below to create your character.
                        In case you want to use a custom class, please refer to the next option below.<br/><br/>
                        <select ng-model="selectedRace" ng-options="race as race.prototype.name for race in races">
                            <option value="">Select a Race</option>
                        </select>
                        <select ng-model="selectedBirthsign"
                                ng-options="birthsign as birthsign.prototype.name for birthsign in birthsigns">
                            <option value="">Select a Birthsign</option>
                        </select>
                        <select ng-model="selectedClass"
                                ng-options="class as class.prototype.name for class in classes">
                            <option value="">Select a Class</option>
                        </select>

                        <br/><br/>
                        <button ng-click="createCharacter()">Create character</button>

                        <br/><br/>
                        <hr/>
                        <h1>Character creation: Custom class</h1>
                        Please select a race and a birthsign from above, and fill in the information below to
                        create your character with a custom class.<br/><br/>

                        <!-- Custom class specialization -->
                        <b>Specialization:</b>
                        <table>
                            <tr>
                                <td ng-repeat="spec in getSpecializations()" class="customClassSpecializationBox">
                                    <input type="radio" ng-model="selectedSpecialization.spec" ng-value="spec"/>
                                    {{spec.prototype.name}}&nbsp;
                                </td>
                            </tr>
                        </table>

                        <!-- Custom class favored attributes -->
                        <br/><b>Favored attributes (choose 2)</b>
                        <table class="customClassFavoredAttributesTable">
                            <tr>
                                <td class="customClassFavoredAttribute" ng-repeat="attr in getAttributes()">
                                    <input ng-model="attr.checked" type="checkbox">
                                    {{attr.attributeType}}&nbsp;
                                </td>
                            </tr>
                        </table>

                        <!-- Custom class major skills -->
                        <br/><b>Major skills (choose 7)</b><br/>
                        Note: Skills that belong to the selected specialization are <span class="customClassSkillNameMod">
                        highlighted</span>.<br/>
                        <div id="customClassSkillsContainer">
                            <table class="customClassSkillsTable" ng-repeat="attr in getAttributes() | limitTo:7">
                                <tr>
                                    <th class="customClassSkillNameHeader">{{attr.attributeType}} skills</th>
                                    <th class="customClassSkillCheckboxHeader">Major?</th>
                                </tr>
                                <tr ng-repeat="skill in attr.getGoverningSkills()">
                                    <td class="customClassSkillName"
                                        ng-class="{true:'customClassSkillNameMod', false:''}[specHasSkillMod(skill)]">
                                        {{skill.skillType}}
                                    </td>
                                    <td class="customClassSkillCheckbox">
                                        <input ng-model="skill.checked" type="checkbox" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div style="clear: both;"></div>

                        <br/>
                        <span ng-class="{true:'customClassSettingsValid', false:'customClassSettingsInvalid'}[isCustomClassValid()]">
                            {{verifyCustomClassSettings()}}
                        </span>
                        <hr/>


                        Note: Clicking the leveling tab will automatically create a default testing character.
                        <br/><br/>
                        <button ng-click="createCharacter()">Create character</button>
                    </div>
                    <div id="tabCharacterLogo">
                        <img src="img/logo.png" style="border: 1px solid saddlebrown"/>
                    </div>
                    <div style="clear:both"></div>
                </div>
                <div id="tabs-2">
                    Guide to come (attribute, skill and efficient leveling descriptions).
                </div>
                <div id="tabs-3">
                    <h1>Leveling tracking test</h1>

                    <!-- Attribute table -->
                    <div id="statDetailsBox">
                        <table border=0 id="statDetailsTable">
                            <tr ng-repeat="attribute in getAttributes()">
                                <td>
                                    <table border=0 style="border:2px solid #b97a57;">
                                        <tr>
                                            <td class="attributeIcon">
                                                <img src="img/attributes/strength.gif"/>
                                            </td>
                                            <td class="attributeName">
                                                <b>{{attribute.attributeType}}</b><br/>
                                                <div ng-bind-html-unsafe="getAttributeProgress(attribute)"></div>
                                            </td>
                                            <td>
                                                <input class="statTextBox" type="text" value="{{attribute.calculateStat()}}" size=1 disabled />
                                            </td>
                                            <td>
                                                <div class="statControls">
                                                    <ul class="icons ui-widget ui-helper-clearfix unselectable">
                                                        <li class="ui-state-default ui-corner-all">
                                                            <span class="ui-icon ui-icon-arrowthick-1-s"
                                                                ng-click="adjustAttributeLevel(attribute,-1)">
                                                            </span>
                                                        </li>
                                                        <li class="ui-state-default ui-corner-all">
                                                            <span class="ui-icon ui-icon-arrowthick-1-n"
                                                                ng-click="adjustAttributeLevel(attribute,1)">
                                                            </span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                                <td>
                                    <img src="img/relationSplit.png"/>
                                </td>
                                <td>
                                    <table border=0 style="border:2px solid #b97a57;">
                                        <tr ng-repeat="skill in attribute.governingSkills">
                                            <td class="{{getSkillNameClass(skill)}}">{{skill.skillType}}</td>
                                            <td>
                                                <input class="statTextBox" type="text" value="{{skill.calculateStat()}}" size=1 disabled />
                                                <input class="statTextBox" type="text" value="{{skill.calculateProgressStat()}}" size=1 />
                                            </td>
                                            <td>
                                                <div class="statControls">
                                                    <ul class="icons ui-widget ui-helper-clearfix unselectable">
                                                        <li class="ui-state-default ui-corner-all" ng-click="adjustSkillProgressLevel(skill,-1)">
                                                            <span class="ui-icon ui-icon-arrowthick-1-s"></span>
                                                        </li>
                                                        <li class="ui-state-default ui-corner-all" ng-click="adjustSkillProgressLevel(skill,1)">
                                                            <span class="ui-icon ui-icon-arrowthick-1-n"></span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                            <td class="statProgress">
                                                <div ng-bind-html-unsafe="getSkillProgress(skill)"></div>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </div>

                    <!-- Character details -->
                    <div id="characterDetailsBox">
                        Character details:<br/><br/>
                        <table class="statTable">
                            <tr>
                                <td>Level:</td>
                                <td>{{getCharacterLevel()}}</td>
                            </tr>
                            <tr>
                                <td style="width: 75px">Race:</td>
                                <td>{{character.gender}} {{character.race.name}}</td>
                            </tr>
                            <tr>
                                <td valign="top">Birthsign:</td>
                                <td>
                                    {{character.birthsign.name}}<br/>
                                    <i>"{{character.birthsign.effect}}"</i>
                                </td>
                            </tr>
                            <tr>
                                <td valign="top">Class:</td>
                                <td>
                                    <b>Name:</b> {{character.class.name}}<br/>
                                    <b>Specialization:</b> {{character.class.specialization.name}}<br/>
                                    <b>Favored attributes:</b> {{character.class.favoredAttributeOne}} and
                                    {{character.class.favoredAttributeTwo}}<br/>
                                    <b>Major skills:</b> {{getClassSkills()}}
                                </td>
                            </tr>
                        </table>

                        <b>Last sync:</b><br/>{{lastSync}}<br/>
                        <br/><b>Character ID:</b><br/>{{character.id}}<br/>
                        <br/><b>Character key:</b><br/>{{character.key}}<br/>

                        <br/>Level progress {{character.calculateLevelProgress()}}% :<br/>
                        <div id="levelProgressBar">
                            <!--<span>Progress towards level {{calculateLevelProgress + 1}}</span>-->
                        </div>

                        <br/><hr/>Attributes to focus on this level:<br/>
                        <table style="width: 100%">
                            <tr>
                                <td>First: </td>
                                <td>
                                    <select ng-model="focusAttributeOne"
                                            ng-options="attribute as attribute.attributeType for attribute in getAttributes()">
                                        <option value="">Select attribute</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>Second: </td>
                                <td>
                                    <select ng-model="focusAttributeTwo"
                                            ng-options="attribute as attribute.attributeType for attribute in getAttributes()">
                                        <option value="">Select attribute</option>
                                    </select>
                                </td>
                            </tr>
                        </table>

                        <br/>
                        <button ng-click="enableSkillModification()">Start leveling!</button>
                    </div>

                    <div style="clear:both;"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer"></div>
</body>
</html>